<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理前端</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/all.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-cart.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-getOrderInfo.css" />
    <style type="text/css">
        h4{
            font-size: 20px;
            line-height: 35px;
            text-align: center;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <span v-if="user===''">请<a href="/pages/userlogin.html">登录</a></span>
                        <span v-else>{{user}},欢迎你</span>
                        <span><a href="register.html">免费注册</a></span>
                    </ul>
                    <div class="fr typelist" style="margin-top: -29px">
                        <ul class="types" style="margin-left: 390px">
                            <li class="f-item">
                                <span>
                                    <a href="shopping.html">首页</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="cart.html">我的购物车</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="home.html">个人信息</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="/logout">退出</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <img src="../images/logo2.png" style="margin-left: -40px; height: 200px; width: 250px;margin-top: -30px;">
                    </div>
                    <div class="yui3-u Rit searchArea" style="margin-right: -100px;margin-top: 72px;font-size: 40px;font-family: '宋体';color: red;">
                        欢迎来到未来生活！
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="cart py-container">
        <!--主内容-->
        <div class="checkout py-container">
            <div class="checkout-tit">
                <h4 class="tit-txt">填写并核对订单信息</h4>
            </div>
            <div class="checkout-steps">
                <!--收件人信息-->
                <div class="step-tit">
                    <h5>收件人地址</h5>
                </div>
                <div class="step-cont">
                    <template>
                        <el-select v-model="itid">
                            <el-option
                                    v-for="(item ,index) in addressList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                            @click="getItemId(item.id)">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="hr"></div>
                <!--支付和送货-->
                <div class="payshipInfo">
                    <div class="step-cont">
                        <ul class="send-detail">
                            <li>
                                <div class="sendGoods">
                                    <span>商品清单：</span>
                                    <template v-for="s in shopcart">
                                        <ul class="yui3-g">
                                            <li class="yui3-u-1-6">
                                                <span><img :src="getpicture(s.picture)"/></span>
                                            </li>
                                            <li class="yui3-u-7-12">
                                                <div class="desc">{{s.goodsName}}</div>
                                            </li>
                                            <li class="yui3-u-1-12">
                                                <div class="price">￥{{s.price}}</div>
                                            </li>
                                            <li class="yui3-u-1-12">
                                                <div class="num">X{{s.number}}</div>
                                            </li>
                                            <li class="yui3-u-1-12">
                                                <div class="exit">{{s.price*s.number}}</div>
                                            </li>
                                        </ul>
                                    </template>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="hr"></div>
                </div>
            </div>
        </div>
        <div class="clearfix trade">
            <div class="fc-price">应付金额:　<span class="price">¥{{totalPrice}}</span></div>
        </div>
        <div class="submit">
            <a class="sui-btn btn-danger btn-xlarge" @click="addOrders">提交订单</a>
        </div>
    </div>

</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script type="text/javascript" src="../js/all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
    function getUrlParam(key){
        var url = decodeURI( window.location.toString() );
        var arr = url.split("?");
        if(arr.length>1){
            var params = arr[1].split("&");
            for(var i=0; i<params.length; i++){
                var param = params[i];  //"pid=101"
                if(param.split("=")[0] == key ){
                    return param.split("=")[1];
                }
            }
        }
        return null;
    }
</script>
<script>
    var vue = new Vue({
        el: '#app',
        data (){
            return {
                user:'',
                uid:'',
                shopcart:[],
                gids:'',
                addressList:[],
                totalPrice:0,
                itid:'',
                oid:0

            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.gids=getUrlParam("gids");
            axios.get("/user/getUsername").then((res) => {
                if(res.data.flag){
                    this.user=res.data.data;
                }
            });
            axios.get("/user/getUserid").then((res) => {
                if(res.data.flag){
                    this.uid=res.data.data;
                }
                this.getAddress();
                axios.get("/shopcart/getcheckGoods?gids="+this.gids+"&uid="+this.uid).then((res) => {
                    if(res.data.flag){
                        this.shopcart=res.data.data;
                        for(var i=0;i<this.shopcart.length;i++){
                            this.totalPrice=this.totalPrice+this.shopcart[i].number*this.shopcart[i].price;
                        }
                    }
                })
            });
        },
        methods: {
            getpicture(picture){
                return "http://106.13.226.130:9000/goods/"+picture;
            },
            getAddress(){
                axios.get("/address/findAll?uid="+this.uid).then((res)=>{
                    if (res.data.flag){
                        this.addressList = res.data.data;
                    }
                })
            },
            getItemId(id){
                this.itid = id;
            },
            addOrders(){
                if (this.itid===''){
                    this.$alert("请选择收货地址");
                }else{
                    var param={
                        addressId:this.itid,
                        userId:this.uid,
                    }
                    console.log(param)
                    axios.post("/orders/add",param).then((res)=>{
                        if (res.data.flag){
                            this.oid=res.data.data.id;
                            for (var i = 0; i < this.shopcart.length; i++) {
                                axios.get("/orderitem/add?gid="+this.shopcart[i].gid+"&oid="+this.oid+"&uid="+this.shopcart[i].uid+"&number="+this.shopcart[i].number).then(()=>{
                                    this.$alert("提交订单成功!").then(()=>{
                                        window.location.href="/pages/shopping.html";
                                    })
                                })
                            }
                        }
                    })
                }
            }
        },
    })
</script>
</html>